<template>
  <div class="other-group">
    <div>五小一大拖拽</div>
    <div class="des">模块拖拽，不能重新渲染dom，不能改变数据结构</div>
    <br>
    <div class="color-show">
      <div v-for="color in colors" v-dragging="{ list: colors, item: color, group: 'colors' }" class="color-box" :style="{'background-color': color.text}"
        :key="color.text">
        {{color.text}}
      </div>
    </div>
  </div>
</template>
<!--your.vue-->
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
export default {
  setup() {
    const interInstance = getCurrentInstance()
    // let $dragging = interInstance.appContext.config.globalProperties.$dragging



    let state = reactive({
      colors: [
        { text: "Aquamarine" },
        { text: "Hotpink" },
        { text: "Gold" },
        { text: "Crimson" },
        { text: "Blueviolet" },
        { text: "rgb(0,100," + Math.random() * 100 + ")" }
      ]
    })

    let VueDragging = vueDrag()

    onMounted(() => {
      // console.log("onmounted", VueDragging)

      VueDragging.$on('dragged', ({ value }) => {
        console.log(value.item)
        console.log(value.list)
      })

      VueDragging.$on('dragend', function (data) {
        console.log('dragend', data)
      })
    })

    return {
      ...toRefs(state)
    }

  },
}
function vueDrag() {
  return getCurrentInstance().appContext.config.globalProperties.$dragging
}
</script>

<style scoped>
.other-group,
.multi-group {
  margin-left: 20px;
  padding: 30px;
  box-sizing: border-box;
}

.color-show {
  /* display: flex;
  flex-wrap: wrap; */
  width: 30rem;
  margin: 0 auto;
}
.color-show:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.color-box {
  float: left;
  width: 33%;
  height: 6rem;
  background: #efefef;
  line-height: 6rem;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
}
.color-box:first-child {
  width: 66%;
  height: 12rem;
}
.color-box.dragging {
  transform: scale(1.1);
}
</style>